<template>
	<view v-if="status">
		<u-popup :show="status" :round="10" mode="bottom" @close="popupClose" @open="popupOpen"
			:closeOnClickOverlay="true">
			<view class="container">
				<view class="headline">
					<image class="img" src="../../static/img/detail.png" mode="aspectFill"></image>
					<view class="img-msg">
						<view class="goods-name">春秋季小香风毛衣</view>
						<view class="price">￥99.90</view>
					</view>
				</view>
				<view class="sort">
					<view class="one">
						<view class="color-sort">颜色分类</view>
						<view class="color-value">
							<view :class="['value-item', i === colorActive ? 'active': '']"
								v-for="(item,i) in colorValue" :key="i" @tap="colorTap(i)">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="one">
						<view class="color-sort">尺码分类</view>
						<view class="color-value">
							<view :class="['value-item', i1 === sizeActive ? 'active': '']"
								v-for="(item1,i1) in sizeValue" :key="i1" @tap="sizeTap(i1)">
								{{item1.name}}
							</view>
						</view>
					</view>
					<view class="one_">
						<view class="color-sort">数量</view>
						<view class="">
							<uni-number-box :min="1" @change="changeValue" />
						</view>
					</view>
				</view>
			</view>
			<view class="add-cart-btn" @tap="addCart" :style="{'background-color': isTitle == '立即购买' ? '#c60122' : '#e72e0d' }">
				<view class="btn">{{isTitle}}</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name: "t-popup",
		props: {
			isPopupStatus: {
				type: Boolean,
				default: ''
			},
			isTitle: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				colorValue: [{
						name: '红色'
					},
					{
						name: '白色'
					},
					{
						name: '黑色'
					},
					{
						name: '蓝色'
					},
					{
						name: '蓝色'
					},
					{
						name: '蓝色'
					}
				],
				colorActive: 0,
				sizeValue: [{
						name: 'S码'
					},
					{
						name: 'M码'
					},
					{
						name: 'L码'
					}
				],
				sizeActive: 0,
				status: this.isPopupStatus,
				popupCartStatus: true
			};
		},
		watch:{
			isPopupStatus() {
				this.status = this.isPopupStatus
			}
		},
		methods: {
			colorTap(i) {
				this.colorActive = i
			},
			sizeTap(i) {
				this.sizeActive = i
			},
			popupOpen() {},
			popupClose() {
				this.status = false
				this.$emit('popupStatus',this.status)
			},
			changeValue() {

			},
			addCart() {
				if(this.isTitle == '立即购买') {
					this.$Router.push('/pages/order/confirm')
					this.popupClose()
				}else {
					this.popupClose()
					this.$emit('popupCartStatus',this.popupCartStatus)
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx 18rpx 0 18rpx;

		.headline {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-bottom: 26rpx;
			border-bottom: solid 1rpx #e5e5e5;
			margin-bottom: 50rpx;

			.img {
				width: 140rpx;
				height: 133rpx;
				background-color: #eeeeee;
				border: solid 1rpx #eeeeee;
				margin-right: 27rpx;
			}

			.img-msg {
				.goods-name {
					width: 243rpx;
					font-size: 28rpx;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #363636;
					//超出一行省略号
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}

				.price {
					font-size: 28rpx;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #d81e06;
				}
			}
		}

		.sort {
			padding-left: 15rpx;

			.one {
				padding-bottom: 35rpx;
				border-bottom: 1rpx solid #e5e5e5;
				margin-bottom: 50rpx;

				.color-sort {
					font-size: 28rpx;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #363636;
					position: relative;

					&:before {
						content: '';
						display: block;
						position: absolute;
						left: -14rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 5rpx;
						height: 29rpx;
						background-color: #c60122;
					}
				}

				.color-value {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: flex-start;
					font-size: 24rpx;
					line-height: 72rpx;
					letter-spacing: 2rpx;
					color: #363636;

					.value-item {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 57rpx;
						margin-top: 40rpx;
						width: 173rpx;
						height: 59rpx;
						background-color: #ffffff;
						box-shadow: 1rpx 1rpx 5rpx 0rpx rgba(64, 62, 61, 0.7);
						border-radius: 5rpx;
						border: solid 1rpx #d2d2d2;

						&.active {
							color: #fff;
							border: solid 1rpx #c60122;
							background-color: #c60122;
						}
					}

					.value-item:nth-child(1),
					.value-item:nth-child(2),
					.value-item:nth-child(3) {
						margin-top: 0;
					}

				}
			}

			.one_ {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 35rpx;
				padding-right: 40rpx;
				margin-bottom: 50rpx;

				.color-sort {
					font-size: 28rpx;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #363636;
					position: relative;

					&:before {
						content: '';
						display: block;
						position: absolute;
						left: -14rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 5rpx;
						height: 29rpx;
						background-color: #c60122;
					}
				}
			}
		}
	}

	.add-cart-btn {
		height: 90rpx;
		background-color: #e72e0d;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			color: #fff;
		}
	}
	
</style>
